<template>
  <div class="main-page">
    <!-- 头部区域 -->
    <div class="header-section">
      <div class="title-section">
          <h1 class="main-title">欢迎来到会议纪要!</h1>
          <p class="subtitle">让每一场会议的价值,清晰可见</p>
        </div>  
          <img src="@/assets/images/home/bg.png" alt="user" class="header-img" />
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="feature-list">
        <!-- 功能1：录音实时转文字 -->
        <div class="feature-item" @click="handleFeatureClick('record')">
          <div class="feature-icon">
            <img src="@/assets/images/home/recordIcon.png" alt="record" class="feature-icon-img" />
          </div>
          <div class="feature-content">
            <h3 class="feature-title">录音实时转文字</h3>
            <p class="feature-desc">边录边转、云端保存、多端互通</p>
          </div>
          <div class="feature-arrow">
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>

        <div class="feature-divider"></div>

        <!-- 功能2：导入音视频转文字 -->
        <div class="feature-item" @click="handleFeatureClick('import')">
          <div class="feature-icon">
            <img src="@/assets/images/home/importIcon.png" alt="import" class="feature-icon-img" />
          </div>
          <div class="feature-content">
            <h3 class="feature-title">导入音视频转文字</h3>
            <p class="feature-desc">好友聊天、本地相册文件轻松转写</p>
          </div>
          <div class="feature-arrow">
            <el-icon><ArrowRight /></el-icon> 
          </div>
        </div>

        <div class="feature-divider"></div>

        <!-- 功能3：导入文本转文字 -->
        <div class="feature-item" @click="handleFeatureClick('import')">
          <div class="feature-icon">
            <img src="@/assets/images/home/textIcon.png" alt="import" class="feature-icon-img" />
          </div>
          <div class="feature-content">
            <h3 class="feature-title">导入文本转文字</h3>
            <p class="feature-desc">文本转写，快速生成纪要</p>
          </div>
          <div class="feature-arrow">
            <el-icon><ArrowRight /></el-icon> 
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <Navigation />
  </div>
</template>

<script setup lang="ts">
import Navigation from '@/components/navigation/index.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const handleFeatureClick = (feature: string) => {
  console.log(`点击了功能: ${feature}`)
  if(feature === 'record') {
    router.push({ path: '/voiceToText' })
  }  else if(feature === 'import') {
    router.push({ path: '/fileToText' })
  }
}
</script>

<style lang="scss" scoped>
.main-page {
  // min-height: 100vh;
  background-color: #fff;
  padding-bottom: 60px; // 为底部导航栏留出空间
}

.header-section {
  min-height: 190px;
  position: relative;

}
.title-section {
  position: absolute;
  z-index: 99;
  left: 20px;
  top: 60px;
} 

.main-title {
  font-size: 26px;
  font-weight: bold;
  color: #102156;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.subtitle {
  font-size: 16px;
  font-weight: bold;
  color: #102156;
  margin: 0;
  line-height: 1.4;
}

.header-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.main-content {
  margin: 0 auto;
}

.feature-list {
  background-color: #fff;
  overflow: hidden;
}

.feature-item {
  display: flex;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  // border-bottom: 1px solid #f0f0f0;
  
  &:hover {
    background-color: #f8f9fa;
  }
  
  &:active {
    background-color: #f0f0f0;
  }
}

.feature-icon {
  width: 55px;
  height: 55px;
  display: flex;
  margin-right: 16px;
}

.feature-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature-content {
  flex: 1;
}

.feature-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 4px 0;
}

.feature-desc {
  font-size: 14px;
  color: #999999;
  margin: 0;
  line-height: 1.4;
}

.feature-arrow {
  color: #999999;
}

.feature-divider {
  height: 1px;
  background-color: #f0f0f0;
}


// 响应式设计
@media (max-width: 768px) {
  .main-title {
    font-size: 24px;
  }
  
  .subtitle {
    font-size: 14px;
  }
}
</style>
